<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>类似与Vue中的app.use</h1>
    <script>
      class Middle {
        constructor() {
          this.middleList = [];
        }

        use(fn) {
          this.middleList.push(fn);
        }

        go(ctx) {
          let index = 0;
          const next = () => {
            index++;
          };
          for (let i = 0; i < this.middleList.length; i++) {
            if (index === i) {
              this.middleList[i](ctx, next);
            }
          }
        }
      }

      const middle = new Middle();
      middle.use((ctx, next) => {
        ctx.name = 'zs';
        next();
      });
      middle.use((ctx, next) => {
        ctx.age = 10;
        next();
      });
      middle.use((ctx) => {
        console.log(ctx); // {name: 'zs', age: 10}
      });
      middle.go({});

      /**
       * 
       * 
        app.use((ctx, next) => {
            ctx.name = 'Lucy'
            next()
        })

        app.use((ctx, next) => {
            ctx.age = 12
            next()
        })

        app.use((ctx, next) => {
            console.log(`${ctx.name} is ${ctx.age} years old.`) // => Lucy is 12 years old.
            next()
        })

        // ... 任意调用 use 插入中间件

       * */
    </script>
  </body>
</html>
